/*
 * @Author: hongbin
 * @Date: 2022-03-27 23:51:23
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-05 14:50:02
 * @Description:提供的元素
 */

import { ElementEnum } from "../../constants";
import defaultImg from "../../assets/image/default.jpg";
import styled from "styled-components";

const RoundImageStyled = styled.div`
  width: 4vw;
  height: 4vw;
  border-radius: 4vw;
  overflow: hidden;
  img {
    width: inherit;
    height: inherit;
  }
`;
//TODO 需要考虑在page中预览的尺寸
const RoundImage = (props: any) => (
  <RoundImageStyled {...props}>
    <img draggable="false" src={defaultImg} alt="图片无法显示" />
  </RoundImageStyled>
);

export const ContainerStyled = styled.div`
  width: 50vw;
  height: 50vh;
  background: #fff;
`;

const Container = (props: any) => <ContainerStyled {...props} />;

export interface IElementItem {
  name: string;
  tag: (props: React.HTMLAttributes<HTMLElement>) => JSX.Element;
  default: {
    width: number;
    height: number;
  };
  unit: {
    width: string;
    height: string;
    [key: string]: string;
  };
}

export const ElementList: {
  [key: number]: IElementItem[];
} = {
  [ElementEnum.element]: [
    {
      name: "文本",
      tag: (props) => <span {...props}>这是一段文本</span>,
      default: {
        width: 10,
        height: 2,
      },
      unit: {
        width: "vw",
        height: "vw",
      },
    },
    {
      name: "图片",
      tag: (props) => <img draggable="false" src={defaultImg} alt="图片无法显示" {...props} />,
      default: {
        width: 15,
        height: 15,
      },
      unit: {
        width: "vw",
        height: "vw",
      },
    },
    {
      name: "圆形图片",
      tag: (props) => <RoundImage {...props} />,
      default: {
        width: 5,
        height: 5,
      },
      unit: {
        width: "vw",
        height: "vw",
      },
    },
    {
      name: "容器",
      tag: (props) => <Container {...props} />,
      default: {
        width: 50,
        height: 50,
      },
      unit: {
        width: "vw",
        height: "vh",
      },
    },
  ],
  [ElementEnum.chart]: [],
  [ElementEnum.component]: [],
};

/**
 * 获取element instance
 * @param {ElementEnum} type
 * @param {string} name
 */
export const getElementItem = (type: ElementEnum, name: string) => {
  return ElementList[type].find((item) => item.name === name);
};

export interface ElementNode extends IElementItem {
  key: string;
  style: Record<string, any>;
}
